<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>{block name="title"}图书管理系统{/block}</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
    <link rel="icon" href="__IMG__/icon.ico" type="image/x-icon"/>

    <!-- Fonts and icons -->
    <script src="__JS__/plugin/webfont/webfont.min.js"></script>
    <script>
        WebFont.load({
            google: {"families":["Open+Sans:300,400,600,700"]},
            custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands"], urls: ['__CSS__/fonts.css']},
            active: function() {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/azzara.min.css">

    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link rel="stylesheet" href="__CSS__/demo.css">
    <style>
        @media (min-width: 576px) {
            #form .form-inline .form-control {
                width: 50%;
            }
        }
    </style>
</head>
<body>
{php}$userinfo = session('userinfo'){/php}
<div class="wrapper">
    <!--
        Tip 1: You can change the background color of the main header using: data-background-color="blue | purple | light-blue | green | orange | red"
    -->
    <div class="main-header" style="background-color: #015BAC !important;">
        <!-- Logo Header -->
        <div class="logo-header">

            <a href="javascript:void(0);" class="logo text-white">
                <!--<img src="__IMG__/logoazzara.svg" alt="navbar brand" class="navbar-brand">-->
                后台管理系统
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i class="fa fa-bars"></i>
					</span>
            </button>
            <button class="topbar-toggler more"><i class="fa fa-ellipsis-v"></i></button>
            <div class="navbar-minimize">
                <button class="btn btn-minimize btn-rounded">
                    <i class="fa fa-bars" style="color: #fff !important;"></i>
                </button>
            </div>
        </div>
        <!-- End Logo Header -->

        <!-- Navbar Header -->
        <nav class="navbar navbar-header navbar-expand-lg">

            <div class="container-fluid">
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle text-white" href="#" id="messageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-envelope"></i>
                        </a>
                        <ul class="dropdown-menu messages-notif-box animated fadeIn" aria-labelledby="messageDropdown">
                            <li>
                                <div class="dropdown-title d-flex justify-content-between align-items-center">
                                    Messages
                                    <a href="#" class="small">Mark all as read</a>
                                </div>
                            </li>
                            <li>
                                <div class="message-notif-scroll scrollbar-outer">
                                    <div class="notif-center">
                                        <a href="#">
                                            <div class="notif-img">
                                                <img src="__IMG__/jm_denis.jpg" alt="Img Profile">
                                            </div>
                                            <div class="notif-content">
                                                <span class="subject">Jimmy Denis</span>
                                                <span class="block">
														How are you ?
													</span>
                                                <span class="time">5 minutes ago</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="notif-img">
                                                <img src="__IMG__/chadengle.jpg" alt="Img Profile">
                                            </div>
                                            <div class="notif-content">
                                                <span class="subject">Chad</span>
                                                <span class="block">
														Ok, Thanks !
													</span>
                                                <span class="time">12 minutes ago</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="notif-img">
                                                <img src="__IMG__/mlane.jpg" alt="Img Profile">
                                            </div>
                                            <div class="notif-content">
                                                <span class="subject">Jhon Doe</span>
                                                <span class="block">
														Ready for the meeting today...
													</span>
                                                <span class="time">12 minutes ago</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="notif-img">
                                                <img src="__IMG__/talha.jpg" alt="Img Profile">
                                            </div>
                                            <div class="notif-content">
                                                <span class="subject">Talha</span>
                                                <span class="block">
														Hi, Apa Kabar ?
													</span>
                                                <span class="time">17 minutes ago</span>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a class="see-all" href="javascript:void(0);">See all messages<i class="fa fa-angle-right"></i> </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle text-white" href="#" id="notifDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-bell"></i>
                            <span class="notification">4</span>
                        </a>
                        <ul class="dropdown-menu notif-box animated fadeIn" aria-labelledby="notifDropdown">
                            <li>
                                <div class="dropdown-title">You have 4 new notification</div>
                            </li>
                            <li>
                                <div class="notif-scroll scrollbar-outer">
                                    <div class="notif-center">
                                        <a href="#">
                                            <div class="notif-icon notif-primary"> <i class="fa fa-user-plus"></i> </div>
                                            <div class="notif-content">
													<span class="block">
														New user registered
													</span>
                                                <span class="time">5 minutes ago</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="notif-icon notif-success"> <i class="fa fa-comment"></i> </div>
                                            <div class="notif-content">
													<span class="block">
														Rahmad commented on Admin
													</span>
                                                <span class="time">12 minutes ago</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="notif-img">
                                                <img src="__IMG__/profile2.jpg" alt="Img Profile">
                                            </div>
                                            <div class="notif-content">
													<span class="block">
														Reza send messages to you
													</span>
                                                <span class="time">12 minutes ago</span>
                                            </div>
                                        </a>
                                        <a href="#">
                                            <div class="notif-icon notif-danger"> <i class="fa fa-heart"></i> </div>
                                            <div class="notif-content">
													<span class="block">
														Farrah liked Admin
													</span>
                                                <span class="time">17 minutes ago</span>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a class="see-all" href="javascript:void(0);">See all notifications<i class="fa fa-angle-right"></i> </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown hidden-caret">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <div class="avatar-sm">
                                <img src="__IMG__/profile.jpg" alt="..." class="avatar-img rounded-circle">
                            </div>
                        </a>
                        <ul class="dropdown-menu dropdown-user animated fadeIn">
                            <!--<li>-->
                                <!--<div class="user-box">-->
                                    <!--<div class="avatar-lg"><img src="__IMG__/profile.jpg" alt="image profile" class="avatar-img rounded"></div>-->
                                    <!--<div class="u-text">-->
                                        <!--<h4>Hizrian</h4>-->
                                        <!--<p class="text-muted">hello@example.com</p><a href="profile.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</li>-->
                            <li>
                                <!--<div class="dropdown-divider"></div>-->
                                <a class="dropdown-item" href="#">我的资料</a>
                                <a class="dropdown-item" href="#">账号设置</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{:url('index/logout')}">退出</a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
        <!-- End Navbar -->
    </div>

    <!-- Sidebar -->
    <div class="sidebar">

        <div class="sidebar-background"></div>
        <div class="sidebar-wrapper scrollbar-inner">
            <div class="sidebar-content">
                <div class="user">
                    <div class="avatar-sm float-left mr-2">
                        <img src="__IMG__/profile.jpg" alt="..." class="avatar-img rounded-circle">
                    </div>
                    <div class="info">
                        <a data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									用户名
									<span class="user-level">{$userinfo['username']}</span>
									<span class="caret"></span>
								</span>
                        </a>
                        <div class="clearfix"></div>

                        <div class="collapse in" id="collapseExample">
                            <ul class="nav">
                                <li>
                                    <a href="#profile">
                                        <span class="link-collapse">我的资料</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#edit">
                                        <span class="link-collapse">账号设置</span>
                                    </a>
                                </li>
                                <!--<li>-->
                                    <!--<a href="#settings">-->
                                        <!--<span class="link-collapse">Settings</span>-->
                                    <!--</a>-->
                                <!--</li>-->
                            </ul>
                        </div>
                    </div>
                </div>
                <ul class="nav">
                    <li class="nav-item {if $url=='Index/index'}active{/if}">
                        <a href="{:url('index/index')}">
                            <i class="fas fa-home"></i>
                            <p>首页</p>
                            <!--<span classes="badge badge-count">0</span>-->
                        </a>
                    </li>
                    {foreach $menus as $k => $v}
                    <li class="nav-item">
                        <a data-toggle="collapse" href="#menu{$v['id']}">
                            <i class="fas fa-layer-group"></i>
                            <p>{$v['title']}</p>
                            <span class="caret"></span>
                        </a>
                        {if isset($v['children'])}
                        <div class="collapse show" id="menu{$v['id']}">
                            <ul class="nav nav-collapse pb-0">
                                {foreach $v['children'] as $ks => $vs}
                                <li class="{if $url==$vs['name']}active{/if}">
                                    <a href="{:url($vs['name'])}">
                                        <span class="sub-item">{$vs['title']}</span>
                                    </a>
                                </li>
                                {/foreach}
                            </ul>
                        </div>
                        {/if}
                    </li>
                    {/foreach}
                </ul>
            </div>
        </div>
    </div>
    <!-- End Sidebar -->

    {block name="main"}主内容{/block}

    <!-- Custom template | don't include it in your project! -->
    <!--<div class="custom-template">-->
        <!--<div class="title">Settings</div>-->
        <!--<div class="custom-content">-->
            <!--<div class="switcher">-->
                <!--<div class="switch-block">-->
                    <!--<h4>Topbar</h4>-->
                    <!--<div class="btnSwitch">-->
                        <!--<button type="button" class="changeMainHeaderColor" data-color="blue"></button>-->
                        <!--<button type="button" class="selected changeMainHeaderColor" data-color="purple"></button>-->
                        <!--<button type="button" class="changeMainHeaderColor" data-color="light-blue"></button>-->
                        <!--<button type="button" class="changeMainHeaderColor" data-color="green"></button>-->
                        <!--<button type="button" class="changeMainHeaderColor" data-color="orange"></button>-->
                        <!--<button type="button" class="changeMainHeaderColor" data-color="red"></button>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="switch-block">-->
                    <!--<h4>Background</h4>-->
                    <!--<div class="btnSwitch">-->
                        <!--<button type="button" class="changeBackgroundColor" data-color="bg2"></button>-->
                        <!--<button type="button" class="changeBackgroundColor selected" data-color="bg1"></button>-->
                        <!--<button type="button" class="changeBackgroundColor" data-color="bg3"></button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="custom-toggle">-->
            <!--<i class="flaticon-settings"></i>-->
        <!--</div>-->
    <!--</div>-->
    <!-- End Custom template -->
</div>
</div>
<!--   Core JS Files   -->
<script src="__JS__/core/jquery.3.2.1.min.js"></script>
<script src="__JS__/core/popper.min.js"></script>
<script src="__JS__/core/bootstrap.min.js"></script>

<!-- jQuery UI -->
<script src="__JS__/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="__JS__/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

<!-- jQuery Scrollbar -->
<script src="__JS__/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>

<!-- Moment JS -->
<script src="__JS__/plugin/moment/moment.min.js"></script>

<!-- Chart JS -->
<script src="__JS__/plugin/chart.js/chart.min.js"></script>

<!-- jQuery Sparkline -->
<script src="__JS__/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>

<!-- Chart Circle -->
<script src="__JS__/plugin/chart-circle/circles.min.js"></script>

<!-- Datatables -->
<script src="__JS__/plugin/datatables/datatables.min.js"></script>

<!-- Bootstrap Notify -->
<script src="__JS__/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>

<!-- Bootstrap Toggle -->
<script src="__JS__/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>

<!-- jQuery Vector Maps -->
<script src="__JS__/plugin/jqvmap/jquery.vmap.min.js"></script>
<script src="__JS__/plugin/jqvmap/maps/jquery.vmap.world.js"></script>

<!-- Google Maps Plugin -->
<script src="__JS__/plugin/gmaps/gmaps.js"></script>

<!-- Sweet Alert -->
<script src="__JS__/plugin/sweetalert/sweetalert.min.js"></script>

<!-- Azzara JS -->
<script src="__JS__/ready.min.js"></script>

<!-- Azzara DEMO methods, don't include it in your project! -->
<!--<script src="__JS__/setting-demo.js"></script>-->
<script src="__JS__/demo.js"></script>
<script>
    $.extend($.fn.dataTable.defaults, {
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        }
    });

    //Notify
    $.notify({
        icon: 'flaticon-alarm-1',
        title: '通知',
        message: '这是一个通知',
    },{
        type: 'info',
        placement: {
            from: "bottom",
            align: "right"
        },
        time: 1000,
    });

    function checkFileExt(filename) {
        var flag = false;
        var arr = ["jpg", "png", "gif", "jpeg"];
        //取出上传文件的扩展名
        var index = filename.lastIndexOf(".");
        var ext = filename.substr(index + 1);
        //循环比较
        for (var i = 0; i < arr.length; i++) {
            if (ext == arr[i]) {
                flag = true; //一旦找到合适的，立即退出循环
                break;
            }
        }
        return flag;
    }

    function uploadOneImage(obj, view) {
        $(".upload-1").remove();
        var html = `<form class="upload-1" id="upload-form" action="{:url('common/upload/index')}" enctype="multipart/form-data" method="post"><input type="file" name="file" accept="image/jpeg,image/jpg,image/png"></form>`;
        $('body').append(html);
        $("#upload-form input").click();
        $("#upload-form input").change(function () {
            console.log($(this).val());
            if (!checkFileExt($(this).val())) {
                swal("提示", "请上传图片类型", {
                    icon : "error",
                    buttons: {
                        confirm: {
                            className : 'btn btn-danger'
                        }
                    },
                });
                return
            }
            $.ajax({
                url: "{:url('common/upload/index')}",
                type: 'post',
                cache: false,
                async: false,
                data: new FormData($('#upload-form')[0]),
                processData: false,
                contentType: false,
                dataType: 'json',
                success(res) {
                    if (res.code == 0) {
                        $(obj).val(res.url);
                        $(view).attr('src', res.url);
                        $(view).show();
                    } else {
                        swal("提示", res.msg, {
                            icon : "error",
                            buttons: {
                                confirm: {
                                    className : 'btn btn-danger'
                                }
                            },
                        });
                    }
                }
            })
        });
    }
</script>
{block name="js"}js内容{/block}
</body>
</html>